<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8" />
  <meta http-equiv = "X-UA-Compatible" content="IE=edge" />
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }

  .But {
    float: right;
    display: none;
  }

  .Div {
    margin: 6px 0;
  }

  .group {
    border: 1px solid pink;
    padding: 10px;
    border-radius: 20px;
  }

  .Div:hover .But {
    display: block;
    color:purple;
    background-color:antiquewhite;
    border-radius: 10px;
  }

  .check {
    float: left;
    height: 20px;
    text-align: center;
  }

  .Div:hover {
    background-color: rgb(112, 188, 216);
    box-shadow: 10px 10px 15px rgb(112, 117, 216);
    transform: scale(1.2);
    transition: all;
  }
</style>

<body>
  <!-- 输入 -->
  <div class = "group">
    <input type = "text" id = "text" placeholder = "请输入" />
    <input type = "button" value = "增加" onclick = "handeclick()" />
    <button id = "button1">全选</button>
    <button id = "button2">删除</button>

    <div id = "todolist">
      <div class = "Div">
        <input type = "checkbox" class = "check" />1
        <button class = "But">删除</button>
      </div>
      <div class = "Div">
        <input type = "checkbox" class = "check" />2
        <button class = "But">删除</button>
      </div>
      <div class = "Div">
        <input type = "checkbox" class = "check" />3
        <button class = "But">删除</button>
      </div>
      <div class = "Div">
        <input type = "checkbox" class = "check" />4
        <button class = "But">删除</button>
      </div>
    </div>
  </div>
</body>

<script lang = "javascript">

  document.getElementById('button2').addEventListener('click', function() {
    var divs = document.getElementsByClassName('Div');
    for (let i = divs.length - 1; i >= 0; i--) {
      if (divs[i].children[0].checked == true) {
        divs[i].parentNode.removeChild(divs[i]);
      }
    }
  });

  document.getElementById('button1').addEventListener('click', function() {
    var div = document.getElementsByClassName('Div');
    var len = 0;
    for (let i = div.length - 1; i >= 0; i--) {
      if (div[i].children[0].checked == true) {
        len++;
      }
    }
    if (len == div.length) {
      for (let i = div.length - 1; i >= 0; i--) {
        div[i].children[0].checked = false;
      }
    }
    else if (len != div.length) {
      for (let i = div.length - 1; i >= 0; i--) {
        div[i].children[0].checked = true;
      }
    }
  })

  const buts = document.getElementsByClassName('But');

  for (let i = 0; i < buts.length; i++) {
    buts[i].onclick = function () {
      this.parentNode.parentNode.removeChild(this.parentNode);
    }
  };

  const divs = document.getElementsByClassName('Div');
  for (let i = 0; i < divs.length; i++) {
    divs[i].onclick = function () {
      this.children[0].checked = !this.children[0].checked;
    }
  }

  function handeclick() {
    if (document.getElementById("text").value == "") {
      return 0;
    }
    const tem = document.getElementById("todolist");
    var div = document.createElement("div");
    var del = document.createElement("button");
    var In = document.createElement("input");
    In.type = "checkbox";
    In.className = "check";
    del.innerText = "删除";
    del.className = 'But';
    del.onclick = function() {
      this.parentNode.parentNode.removeChild(this.parentNode);
    }
    div.className = 'Div';
    const s = document.getElementById("text").value;
    document.getElementById("text").value = '';
    div.innerText = s;
    div.append(In);
    div.append(del);

    div.onclick = function() {
      In.checked = !In.checked;
    }

    tem.append(div);
  }
  const button = document.getElementById("button2");
  button.onclick = handeclick;

  document.getElementById("text").addEventListener("keyup", function(event) {
    if (event.keyCode == 13) {
      handeclick();
    }
  });
</script>
</html>